<script lang="ts" setup>
interface ListItemProps {
    label?: string
    value?: string,
    arrow?: boolean
}

withDefaults(defineProps<ListItemProps>(), {
    arrow: false
})
</script>

<template>
    <div class="umrp-list-item">
        <slot></slot>
        <template v-if="label || value">
            <umrp-container direction="horizonal" justify="between" align="center">
                <umrp-text>{{ label }}</umrp-text>
                <umrp-space align="center">
                    <slot name="value" v-if="$slots.value"></slot>
                    <umrp-text color="secondary" v-else>{{ value }}</umrp-text>
                    <umrp-icon name="right" color="secondary" :size="16" v-if="arrow"></umrp-icon>
                </umrp-space>
            </umrp-container>
        </template>
    </div>
</template>

<style lang="scss" scoped>
.umrp-list-item {
    background-color: #fff;
}
</style>
